<template>
    <div class="loginContent"> 
            <el-row>
              <el-col :span="24">
                 <div class="loginhead">
                      <div>
                          <strong>注册DATA</strong>
                      </div>
                      <div>
                          <div>
                               <div>
                                   产业地图<span>
                                     <svg fill="none" stroke="currentColor" stroke-width="4" viewBox="0 0 48 48" width=".7em" height=".7em" class="index-module__menu-title-icon--ZPQry arco-icon arco-icon-right"><path d="m16 39.513 15.556-15.557L16 8.4"></path></svg>
                                   </span>
                                   <div>
                                       <div>
                                          <span>产业导航</span><span>研究院</span><span>大学</span> 
                                       </div>
                                        <div>
                                          <span>产业导航</span><span>研究院</span><span>大学</span> 
                                       </div>
                                        <div>
                                          <span>产业导航</span><span>研究院</span><span>大学</span> 
                                       </div>
                                   </div> 
                               </div>
                               <div>生态价值<span>
                                     <svg fill="none" stroke="currentColor" stroke-width="4" viewBox="0 0 48 48" width=".7em" height=".7em" class="index-module__menu-title-icon--ZPQry arco-icon arco-icon-right"><path d="m16 39.513 15.556-15.557L16 8.4"></path></svg>
                                   </span>
                                   <div>
                                       <div>
                                          <span>产业导航</span><span>研究院</span><span>大学</span> 
                                       </div>
                                        <div>
                                          <span>产业导航</span><span>研究院</span><span>大学</span> 
                                       </div>
                                        <div>
                                          <span>产业导航</span><span>研究院</span><span>大学</span> 
                                       </div>
                                   </div>

                               </div>
                          </div>
                          <div>
                              <div>购买服务</div>
                              <div>注册用户</div>
                          </div>
                      </div>  
                 </div>
               </el-col>
               <el-col :span="16"> 
                  <div class="gridCon">
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                         <div class="circle"></div>
                          <div class="circle"></div>
                        <div class="inner">
                             <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                               <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                             <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                             <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                             <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                             <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                             <div class="enter-y-r">
                                <div>经济</div>
                                <div>
                                  <el-icon><MoonNight /></el-icon>
                                </div>
                                <div>价值的创造、转化与实现</div>
                             </div>
                         
                        </div>
                  </div>
               </el-col>
               <el-col :span="8">
                    <div class="login_from">
                         <div class="logo">
                             <strong class="enter-x-r">国威数据库</strong>
                             <em class="enter-x-r">Welcome to Login!</em>
                         </div>
                         <div class="cellitem enter-x-r login_from_name">
                              <div
                              :class="[
                           nameError?'error':''
                         ]"
                              ><input 
                              @input="nameInput"
                              placeholder="请输入用户名"
                              v-model="name" maxlength="10" type="text"/></div>
                              <div :class="{
                                active:nameError
                              }">{{nameError}}</div>
                         </div>
                         <div  
                         class="cellitem enter-x-r login_from_psd"
                         >
                              <div
                               :class="[
                            psdError?'error':''
                         ]"
                              ><input
                              @input="psdInput"
                              maxlength="12"
                              placeholder="请输入密码"
                              v-model="psd"  type="password"/></div>
                               <div :class="{
                                active:psdError
                              }">{{psdError}}</div>
                         </div>
                         <div class="login_from_test enter-x-r">
                               <span>忘记密码</span><span>其他登录方式</span>
                         </div>
                           <div class="login_from_btn enter-x-r">
                              <button @click="logins">登录</button>
                         </div>
                          <div class="login_from_allow enter-x-r">
                              <div class="dots">
                                 <div class="items"></div>
                              </div>
                              <div>请同意用户隐私条约</div>
                         </div>
                    </div>
               </el-col>
            </el-row>
    </div>
    <!--  <button @click="logins">logins</button> -->
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs,ref} from 'vue'; 
import { useStore } from "vuex";
import {key} from '@/store/index';
type NPType = Boolean | string | null;
interface RolType  {
     reg:RegExp,
     require:Boolean,
     allow:Boolean
}
export default defineComponent({
      name:'LOGIN',
      setup(){
        const store = useStore(key); 
        const froms = reactive<{name:string,psd:string}>({
             name:'',
             psd:''
        })
        const errors = reactive<{nameError:NPType,psdError:NPType}>({
             nameError:null,
             psdError:null
        })
        const vailte = {
              name:{
                   reg:/^[a-zA-Z0-9]{10}$/,
                   require:true,
                   allow:true,
              },
              psd:{
                   reg:/^[a-zA-Z0-9]{12}$/,
                   require:true,
                   allow:true,
              }
        } as {name:RolType,psd:RolType};
        const nameInput = ()=>{ 
             vailte.name.allow=true;   
             errors.nameError=null;
             console.log('aaa')
        }
        const psdInput = ()=>{ 
           vailte.psd.allow=true;
           errors.psdError=null;
        }
        const logins = ()=>{ 
            if(vailte.name.require && froms.name.length<1){
                  errors.nameError = '用户名不能为空'; 
                  vailte.name.allow=false;
          }else if(!vailte.name.reg.test(froms.name)){
                  errors.nameError = '用户名格式有误'; 
                  vailte.name.allow=false;
          }
            if(vailte.psd.require && froms.psd.length<1){
                  errors.psdError = '密码不能为空'; 
                  vailte.psd.allow=false;
          }else if(!vailte.psd.reg.test(froms.psd)){
                  errors.psdError = '密码格式有误'; 
                  vailte.psd.allow=false;
          } 
           if(vailte.name.allow && vailte.psd.allow){
            if(froms.name=='admin12345'){
                   store.dispatch('CREATE_ROUTER','super')
            }else{
                   store.dispatch('CREATE_ROUTER','test')
            }   
          }
          //    
        }
        return {
             logins,
             nameInput,
             psdInput,
             ...toRefs(froms),
             ...toRefs(errors) 
        }
      }
})  
</script>

<style lang="scss" scoped>
.gridCon{
  width: 100%;
  height: 90vh;
  position: relative;
  // background: rgb(245, 242, 242);
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .inner{
      width: inherit;
      height: 75%; 
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      &>div{
            flex-basis: 160px;
            backdrop-filter: blur(10px);
            border-radius: 8px; 
            background: rgba(255,255,255,.05);
            box-shadow: 0 0 10px rgba(0,0,0,0.25);
            margin: .5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            &>div:nth-of-type(1){
               font-weight: bold;
               font-size: 1.5rem;
               &+div{
                margin: .5rem 0;
                  &+div{
                     font-size: .8rem;
                     color: #666;
                  }
               }
            }
      }
  }
   .circle {
  width: 80px;
  height: 80px;
  background: radial-gradient(#53ef7d, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}
.circle:nth-child(1) {
  top:  75%;
  left: 16%;
   background: radial-gradient(#3348e6, #4d67fa);
}

.circle:nth-child(2) {
  bottom: 334px;
  right: 404px;
   background: radial-gradient(#33e68a, #4dfa8f);
  animation-name: move-down1;
}
.circle:nth-child(3) {
  bottom: 113px;
  right: 180px;
  animation-name: move-down1;
  background: radial-gradient(#e63381, #e63381);
}
.circle:nth-child(4) {
  top: 30%;
  right: 130px;
  animation-name: move-down1;
}
.circle:nth-child(5) {
  top: 45%;
  left: 130px;
  width:  50px;
  height: 50px;
  background: radial-gradient(#d872b1, #d872b1);
  animation-name: move-down1;
}
@keyframes move-up6 {
  to {
    transform: translateY(-10px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(10px);
  }
}
}

.loginhead{
    height: 10vh;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
    display: flex;
    &>div:nth-of-type(1){
      width: 200px; 
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      &+div{
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &>div:nth-of-type(1){
               display: flex;
               align-items: center;
               height: 100%;
               &>div{
                   margin: 0 .5rem;
                   cursor: pointer;
                   position: relative;
                   height: 100%; 
                   display: flex;
                 
                   align-items: center;
                   font-size: .9rem;
                   
                   &:hover{
                       &>div{
                          visibility: visible;
                          opacity: 1;
                          margin: 0;
                          
                       }
                       &>span{
                          transform: rotate(90deg);
                       }
                   }
                   &>span{
                     transition: all .2s ease-in-out 0s;
                   }
                   &>div{
                      backdrop-filter: blur(10px);
                       position: absolute;
                       z-index: 999999;
                       top: 10.3vh;
                       left: -10px;
                       visibility: hidden;
                       opacity: 0;
                       margin-top: .3rem;
                       transition: all .3s ease-in 0s;
                       background: #fff;
                       width: 40vw;
                       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
                       display: flex;
                         flex-direction: column;
                      &>div{
                         display: flex;
                         align-items: center;
                         margin: 1rem 0;
                         &>span{
                           display: inline-block; 
                           &:nth-of-type(1){
                             color: #007fff;
                             font-size: .8rem;
                             padding:0 1rem;
                             border-right: 1px solid #ccc;
                           }
                           &:not(:nth-of-type(1)){
                             font-size: .8rem;
                             padding:0 1rem;
                              color: #666;
                           }
                         }
                       }
                   }
               }
               &+div{
                   display: flex;
                   padding: 0 1.5rem ;
                   align-items: center;
                   &>div{
                    cursor: pointer;
                     &:hover{
                       color: #007fff !important; 
                     }
                     &:nth-of-type(1){
                        // background: #007fff;
                        // border-radius: 30px;
                        // padding: .2rem .8rem;
                        // color: #fff;
                        // font-size: .8rem;
                        // margin: 0 .5rem; 
                            color: #666;
                            padding: 2rem;
                        &+div{ 
                            color: #666;
                            padding:0 2rem;
                            border-left: 1px solid rgb(195, 194, 194);
                        }
                   }
                   }
               }
          }
      }
    }
}
.logo{
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    strong{
      font-size: 1.5rem;
    }
    em{
       font-size: .8rem;
    }
}
.loginContent{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
   .login_from{
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 15% 0;
     width: 70%;
        .items{
            position: absolute;
            width: 7px;
            height: 7px;
            background: #47a0fa;
            border-radius: 50%;
            }
     &_allow{
        display: flex;
        align-items: center;
        margin-top: 1rem;
        .dots{
            width: 7px;
            height: 7px;
            border: 1px solid #007fff !important;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 50%;
            padding: .3rem !important; 
            &+div{
               color: #333;
               font-size: 0.8rem;
               margin-left: .5rem;
            }
        }
     }
     &_test{
         display: flex;
         margin-bottom: 1rem;
         &>span{
             display: flex;
             padding: 0 1rem;
             border-right: 1px solid rgb(177, 175, 175);
             font-size: .8rem;
             color: rgb(182, 182, 182);
             cursor: pointer;
             &:hover{
                  color: #007fff;
             }
             &:not(:nth-of-type(1)){
                 border: none;
             }
             &:nth-of-type(1){
              padding-left: 0;
             }
         }
     }
     &_btn{
        &>button{
           width: 100%;
           background: #007fff;
           padding: .5rem 0;
           color: #f2f3f8;
           border-radius: 5px;
        }
     }
     .cellitem{
        &>div:nth-of-type(1){
            padding: .5rem;
            background: #f2f3f8;
            border: 1px solid #fff;
            border-radius: 5px;
            &:focus-within{
                border: 1px solid #007fff;
            }
            input{
                outline-style: none;
                background: transparent;
                border: none;
                font-size: .9rem;
                color: #333;
            }
            &.error{
                 background:rgba(237, 110, 110, 0.299); 
            }
            &+div{
                height: 1.5rem;
                line-height: 1.4rem;
                color: rgb(237, 110, 110);
                font-size: .8rem;
                padding: .1rem 0;
                transform: translateX(30px);
                opacity: 0;
                transition: all .2s ease-in 0s;
                &.active{
                   transform: translateX(0);
                   opacity: 1;
                }
            }
        } 
     }
   }
}
</style>